<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <script src="../../iron-test-helpers/mock-interactions.js"></script>
  <link rel="import" href="../../test-fixture/test-fixture.html">

  <link rel="import" href="helpers.html">
  <link rel="import" href="../vaadin-grid.html">

  <dom-module id="dynamic-item-size-grid-styles" theme-for="vaadin-grid">
    <template>
      <style>
        /* Override Lumo theme */

        [part~="cell"]:not([part~="details-cell"]) ::slotted(vaadin-grid-cell-content) {
          padding: 0 !important;
        }

        [part~="cell"] {
          padding: 1px;
          line-height: 18px;
        }

        :host(.high) [part~="cell"] {
          line-height: 100px;
        }
      </style>
    </template>
  </dom-module>
</head>
<body>

  <test-fixture id="default">
    <template>
      <vaadin-grid style="width: 200px; height: 200px;" size="1000">
        <vaadin-grid-column>
          <template>[[index]]</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </template>
  </test-fixture>

  <script>

    describe('Dynamic item size', () => {
      let scroller, grid;

      beforeEach(() => {
        grid = fixture('default');
        grid.dataProvider = infiniteDataProvider;
        scroller = grid.$.scroller;
        flushGrid(grid);
      });

      it('update size using item index', done => {
        const firstItem = getFirstVisibleItem(grid);

        expect(firstItem.offsetHeight).to.be.below(100);

        grid.classList.add('high');
        flushGrid(grid);

        // The following is to make Safari react
        // to host class change and apply new styles
        grid.style.display = 'none';
        flush(() => {
          grid.style.display = 'block';
          expect(firstItem.offsetHeight).not.to.be.below(100);
          done();
        });
      });

    });

  </script>

</body>
</html>
